<template>
  <div class="mon_box">
    <el-row class="f_row">
      <span>站点选择 :</span>
      <el-select
        @clear="clear_c"
        @change="select_c"
        v-model="now_station"
        clearable
        placeholder="请选择"
      >
        <el-option
          v-for="item in station"
          :key="item.station.id"
          :label="item.station.name"
          :value="item.station.id"
        ></el-option>
      </el-select>
      <el-button @click="succ_box" class="succ_box" size="mini" type="primary">确定</el-button>
    </el-row>

    <!-- ======================== -->

    <div class="row_station">
      <el-row :gutter="10" type="flex" align="middle" :key="k" v-for="(item,k) in qx_station">
        <el-col class="img_box" :span="10">
          <div>
            <img :src="item.icon" alt>
          </div>
        </el-col>
        <el-col :span="8">
          <p>{{ item.name }}</p>
          <p>{{ item.f_station }}</p>
        </el-col>

        <el-col :span="5">
          <i class="ali_iconfont ali_icondianyadengji"></i>
          <span>{{ item.voltage }}</span>
        </el-col>
        <el-col :span="5">
          <img width="18" height="18" :src="item.icon_i" alt>
        </el-col>
        <el-col :span="10">
          <el-row type="flex">
            <div class="dl">电量：</div>
            <el-progress :percentage="item.battery"></el-progress>
          </el-row>
        </el-col>
        <el-col class="camera_col" :span="16">
          <el-button @click="more_detail(item)" size="mini" type="primary">查看更多信息</el-button>
          <el-button
            @click="station_camera(item)"
            type="warning"
            size="mini"
            icon="el-icon-video-camera"
            class="camera_btn"
          ></el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 弹出框部分 -->
    <el-dialog class="detail_more" :title="active_qx_sta.name" :visible.sync="dialogVisible">
      <!-- <span>这是一段信息</span> -->
      <el-row type="flex">
        <el-col class="img_box_d">
          <img width="300" height="300" :src="active_qx_sta.icon" alt="暂无图片描述">
        </el-col>
        <el-col>
          <ul>
            <li>站点 : {{ active_qx_sta.f_station }}</li>
            <li>经度 : {{ active_qx_sta.lng }}</li>
            <li>纬度 : {{ active_qx_sta.lat }}</li>
            <li>
              连接状态 :
              <img
                :src="active_qx_sta.icon_i"
                :title="active_qx_sta.flag_s"
                :alt="active_qx_sta.flag_s"
              >
            </li>

            <li>
              电压:
              <i class="ali_iconfont ali_icondianyadengji"></i>
              {{active_qx_sta.voltage}}
            </li>

            <li>
              <el-row type="flex">
                电量 :
                <el-progress :percentage="active_qx_sta.battery"></el-progress>
                <!-- {{active_qx_sta.battery}} -->
              </el-row>
            </li>
          </ul>
        </el-col>
      </el-row>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>-->
    </el-dialog>
    <!-- 摄像头查看 -->
    <el-dialog title="视频" :visible.sync="dialogVisible_camera" width="50%">
      <el-table :data="camera_list" stripe style="width: 100%">
        <el-table-column prop="name" label="名字" width></el-table-column>
        <el-table-column prop="lng" label="经度" width></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop label="查看">
          <template slot-scope="info">
            <el-button @click="op_camera(info.row)" size="mini" type="primary" plain>视频</el-button>
            <el-popover v-if="info.row.isJifeiCamera" placement="right" width trigger="click">
              <el-date-picker
                @change="jf_time_change"
                v-model="jf_img_time"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']"
              ></el-date-picker>
              <el-button
                slot="reference"
                @click="img_camera(info.row)"
                size="mini"
                type="primary"
                plain
                style="margin-left:10px"
              >图片</el-button>
            </el-popover>
            <el-button
              v-if="!info.row.isJifeiCamera"
              @click="img_camera(info.row)"
              size="mini"
              type="primary"
              plain
            >图片</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 视频展示 -->
    <el-dialog
      @close="clear_data"
      title="视频"
      :visible.sync="dialogVisible_camera_video"
      width="50%"
    >
      <div class="video_box">
        <video loop id="myVideo" autoplay controls preload="auto">
          <source type="application/x-mpegURL">
        </video>
      </div>
    </el-dialog>
    <!-- 图片展示 -->
    <el-dialog
      @close="clear_data"
      class="camerm_box"
      title="图片"
      :visible.sync="dialogVisible_camera_img"
      width="50%"
    >
      <div class="back_box" v-show="img_back_lock">
        <i @click="arrow_left" class="el-icon-arrow-left arrow-left"></i>
        <i @click="back_ul" class="el-icon-back back_btn"></i>
        <img :src="url_big" alt>
        <i @click="arrow_right" class="el-icon-arrow-right arrow-right"></i>
      </div>
      <div v-show="!img_back_lock" class="img_box_camerm">
        <ul>
          <li :key="k" v-for="(item,k) in img_list">
            <!-- <img :src="item.picUrl" alt>
            {{item.picUrl}}-->
            <el-image @click="img_click(item)" :src="item.picUrl">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </li>
        </ul>
        <el-pagination
          @size-change="img_SizeChange"
          @current-change="img_CurrentChange"
          :page-sizes="[3,9, 14, 21, 24]"
          :page-size="9"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- :current-page="9" -->
    </el-dialog>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  created() {
    this.one_data();
  },
  data() {
    return {
      // 弹出框开关·
      dialogVisible: false,
      // 站点信息
      station: [],
      // 当前选择站点的信息
      now_station: "",
      // 气象站集合
      qx_station: [],
      // 用户信息
      user_info: this.$store.state.user_info.data,
      // 点击选中的子站
      active_qx_sta: {},
      // 摄像头弹框 锁
      dialogVisible_camera: false,
      // 摄像头表格
      camera_list: [],
      // 摄像头列表和 视频锁
      dialogVisible_camera_video: false,
      dialogVisible_camera_img: false,
      // 图片列表
      img_list: [],
      page: "1",
      pagesize: "9",
      total: "0",
      camera_obj: {},
      img_back_lock: false,
      //
      jf_img_time: [],
      // 精确到秒的时间
      time_miao: [],
      // 当前jf摄像头
      jf_obj: {},
      // 当前放大图片
      url_obj: {},
      img_index: 0,
      url_big: ""
    };
  },
  methods: {
    // 大图片模式下切换 查看图片
    arrow_right() {
      this.img_index++;
      if (this.img_index > this.img_list.length - 1) {
        this.$message.warning("没有更多图片了");
        this.img_index = this.img_list.length - 1;
        return false;
      }
      this.url_big = this.img_list[this.img_index].picUrl;
    },
    arrow_left() {
      this.img_index--;
      if (this.img_index < 0) {
        this.$message.warning("这是第一张了");
        this.img_index = 0;
        return false;
      }
      this.url_big = this.img_list[this.img_index].picUrl;
    },
    // 清除数据 {
    clear_data() {
      this.img_list = [];
      this.camera_obj = {};
    },
    // bakc
    back_ul() {
      this.img_back_lock = false;
    },
    // 图片点击
    img_click(url_obj) {
      // console.log(url_obj);
      this.img_back_lock = true;
      this.url_big = url_obj.picUrl;
      this.url_obj = url_obj;
      this.img_index = this.url_obj.index;
    },
    // 分页当前页数
    img_SizeChange(pagesize) {
      this.pagesize = pagesize;
      this.img_camera(this.camera_obj);
      //
    },
    img_CurrentChange(size) {
      this.page = size;
      this.img_camera(this.camera_obj);
      //
    },
    // 选择时间选定
    async jf_time_change(time_) {
      // 格式化时间 传来的时间是否超过七天
      if (!this.getDiff(time_))
        return this.$message.warning("请选择的时间范围不要超过七天");
      // 在七天以内的 时间保存
      this.time_miao = this.getDiff(time_);
      // 封装数据对象 begin： 开始时间 end：结束时间 id： 极飞摄像头的 id dataType:默认传2
      var obj = {
        begin: this.time_miao[0],
        end: this.time_miao[1],
        id: this.jf_obj.id,
        dataType: "2"
      };

      // 引入base64解码
      let Base64 = require("js-base64").Base64;
      // 发送请求 序列化对象
      let { data: res } = await this.$http.post(
        "/camera/requestPic",
        Qs.stringify(obj)
      );
      // 如果 该时间段内 没有图片可以查询
      if (!res.datapoints) {
        // 清除已选时间
        this.jf_img_time = [];
        // 弹出提示信息
        return this.$message.warning("暂无图片可查看");
      }
      // 有历史图片的情况
      res.datapoints.forEach((item, index) => {
        // 切割之前先将 返回的加密字符串 解码
        item.data = Base64.decode(item.data);
        var arr = item.data.split(",");
        // 将数据包装成 img盒子可以用的数据格式
        var obj_jf = {
          picUrl: arr[0],
          created_at: item.created_at,
          index: index
        };
        // 将对象 放在图片盒子里边
        this.img_list.push(obj_jf);
      });
      // 清除时间默认值
      this.dialogVisible_camera_img = true;

      this.jf_img_time = [];
    },
    getDiff(time) {
      var start = time[0].getTime();
      var end = time[1].getTime();
      var diff = end - start;
      if (diff > 604800 * 1000) {
        //
        this.jf_img_time = [];
        return false;
      } else {
        var time_arr = [];
        time_arr[0] = time[0].getTime() / 1000;
        time_arr[1] = time[1].getTime() / 1000;
        return time_arr;
      }
      //
    },
    // 查看摄像头图片
    async img_camera(obj) {
      // 保存 要查看图片的 气象站对象
      this.jf_obj = obj;
      // 判断问是否是极飞摄像头
      if (obj.isJifeiCamera) {
        // 如果是的话 打断执行普通 摄像头的流程
        return;
      }
      //
      this.camera_obj = obj;
      var img_ret = {
        cSerial: obj.serial,
        page: this.page,
        pagesize: this.pagesize
      };
      let { data: res } = await this.$http.post(
        "/picture/list",
        Qs.stringify(img_ret)
      );
      if (res.status != 0) return this.$message.warning("暂无历史图片可查看");
      this.dialogVisible_camera_img = true;

      this.img_list = res.datas;
      this.total = res.total;
      //
    },
    fn(url) {
      if (Hls.isSupported(url)) {
        var video = document.getElementById("myVideo"); // 获取 video 标签
        var hls = new Hls(); // 实例化 Hls 对象
        hls.loadSource(url); // 传入路径
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function() {
          video.play(); // 调用播放 API
        });
      }
    },
    // 弹出现场视频
    op_camera(obj) {
      if (!obj.playUrl) {
        return this.$message.error("暂无视频查看");
      }
      this.dialogVisible_camera_video = true;

      // this.camera_lock = false;
      setTimeout(() => {
        // this.baiduMp4(obj);
        // this.video_js(obj.playUrl);
        this.fn(obj.playUrl);
      }, 1000);
    },
    // 点击查看站点下的 摄像头
    async station_camera(obj) {
      let { data: res } = await this.$http(`/camera/listBySid/${obj.f_id}`);
      this.dialogVisible_camera = true;
      this.camera_list = res.datas;
    },
    // 查看更多数据按钮
    more_detail(obj) {
      if (obj.flag == "00") {
        obj.flag_s = "已断开";
      } else if (obj.flag == "01") {
        obj.flag_s = "连接正常";
      } else {
        obj.flag_s = "报警";
      }
      this.active_qx_sta = obj;

      this.dialogVisible = true;
    },
    // 加载首屏数据
    async one_data() {
      let { data: res2 } = await this.$http(
        `/station/listStationsAndCollectorSingle/${this.user_info.id}`
      );
      this.station = res2.datas;
      // 在添加之前清空数组
      this.qx_station = [];
      // 循环站点
      this.station.forEach(item => {
        // 每个站点下的存放气象站的数组，循环出来
        item.collectorSingles.forEach(item2 => {
          // 将该气象站上的站点名字绑定在对象上
          item2.f_station = item.station.name;
          // 将站点的id挂载到对象上
          item2.f_id = item.station.id;
          // 图片需要在循环之前引入进来，并且拼好路径
          item2.icon_i = require("../assets/img/line" + item2.flag + ".png");
          // 将每一项加工完的气象站添加到数组里边
          this.qx_station.push(item2);
        });
      });
    },
    // 下拉框变化
    select_c(a) {},
    // 清除下拉框事件
    clear_c() {
      this.one_data();
    },
    // 点击确认按钮
    succ_box() {
      if (!this.now_station) {
        return false;
      }
      this.qx_station = [];
      this.station.forEach(item => {
        item.collectorSingles.forEach(item2 => {
          if (item2.f_id == this.now_station) {
            this.qx_station.push(item2);
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.camera_col {
  display: flex;
  margin-left: 60px;
  .camera_btn {
    font-size: 20px;
    padding: 3px 32px;
  }
}

.video_box {
  width: 100%;
  height: 500px;
  position: relative;
  #myVideo {
    position: absolute;
    width: 100%;
    height: 100%;
  }
}
.back_box {
  position: relative;
  .arrow-left,
  .arrow-right {
    position: absolute;
    font-size: 50px;
    color: #5da5e0;
    font-weight: 700;
    top: 50%;
  }
  .arrow-left {
    left: -20%;
  }
  .arrow-right {
    right: -20%;
  }
  i {
    font-size: 22px;
    cursor: pointer;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.img_box_camerm {
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    li {
      width: 33%;
      padding: 3px;
      text-align: center;
      // line-height: ;
      img {
        width: 100%;
      }
      .el-image {
        cursor: pointer;
        font-size: 40px;
      }
    }
  }
}

.dl {
  white-space: nowrap;
}

.img_box_d {
  padding-right: 20px;
}

/* 监控管理滚动条 */
/* // 滚动条 */
.row_station::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
.row_station::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #5da5e0;
}
.row_station::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: #fff;
}
.detail_more {
  li {
    line-height: 53px;
  }
}
.succ_box {
  margin-left: 15px;
}
.f_row {
  padding: 20px 0px;
  border-bottom: 3px dashed #ccc;
}
// 进度条宽度
.el-progress {
  width: 80%;
}
.row_station {
  overflow: auto;
}
.mon_box,
.row_station {
  height: 100%;
  padding-bottom: 30px;
}
.row_station > .el-row {
  // height: 60px;
  // background-color: pink;
  border-bottom: 1px solid #aaa;
  padding: 20px 0px;
}
// 限制图片大小
.img_box {
  div {
    margin: 0 auto;
    width: 50px;
    height: 50px;
  }

  img {
    width: 100%;
    height: 100%;
  }
}
.el-progress {
  //   line-height: 18px;
  padding-left: 8px;
}
</style>